<template>
  <div>
    <div class="name">{{ title }}
      <!-- <span style="color:#999999;">&nbsp;&nbsp;
        <span style="color:#dddddd;opacity: 0.5;">|</span>
        &nbsp;&nbsp;{{linkTitle}}
      </span> -->
    </div>
    <div class="money">
      {{`￥${Number.parseFloat(cost).toFixed(2)}`}}
      <!-- <ICountUp
        :start='0'
        :endVal="Number.parseFloat(cost)"
        :options="countUpOption"
      ></ICountUp> -->
    </div>
    <div class="compare">
      <div class="box">
        <div class="left">环比上月</div>
        <div class="right">
          <div
            class="up"
            v-if="isUp"
          ></div>
          <div
            class="down"
            v-else
          ></div>
          <div class="per">
            {{`${Number.parseFloat(Ratio.replace('%','')).toFixed(2)}%`}}
            <!-- <ICountUp
              :endVal="Ratio.replace('%','')"
              :options="countUpOption2"
            ></ICountUp> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import ICountUp from 'vue-countup-v2'
  export default {
    props: {
      title: String,
      linkTitle: String,
      cost: {
        type: String,
        default: '0'
      },
      Ratio: { // 环比
        type: String,
        default: '0%'
      }
    },
    data () {
      return {
        isUp: false,
        // countUpOption: {
        //   useEasing: true,
        //   useGrouping: true,
        //   separator: '',
        //   decimal: '',
        //   prefix: '',
        //   suffix: '',
        //   formattingFn: (n) => {
        //     console.log('n', n)

        //     return `￥${n}`
        //   }
        // },
        // countUpOption2: {
        //   useEasing: true,
        //   useGrouping: true,
        //   separator: '',
        //   decimal: '.',
        //   prefix: '',
        //   suffix: '',
        //   formattingFn: (n) => {
        //     return `${Number.parseFloat(n).toFixed(2)}%`
        //   }
        // },
      }
    },
    // components: { ICountUp },
    watch: {
      Ratio: {
        handler: function (val) {
          if (val) {
            const str = val.charAt(0)
            if (str.includes('-')) {
              this.isUp = false
            } else {
              this.isUp = true
            }
          }
        },
        immediate: true,
      }
    }

  }
</script>

<style lang="scss" rel="stylesheet/scss">
.name {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: LEFT;
  color: #333333;
  line-height: 40px;
  margin-left: 15px;
}
.money {
  font-size: 45px;
  margin-top: 40px;
  font-family: Oxanium, Oxanium-Bold;
  font-weight: 900;
  text-align: CENTER;
  color: #33317e;
  line-height: 45px;
}
.compare {
  margin: 20px 10px;
  padding: 10px;
  margin-top: 60px;
  background: linear-gradient(90deg, #f5f6f8, #ffffff 100%);
  border-radius: 8px;
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto;
    & + .box {
      margin-top: 20px;
    }
    .left {
      min-width: 80px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #666666;
      line-height: 20px;
    }
    .right {
      display: flex;
      width: 100px;
    }
    .per {
      width: 49px;
      height: 20px;
      font-size: 14px;
      font-family: Oxanium, Oxanium-Regular;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      margin-left: 5px;
    }
    .up {
      border: 6px solid transparent;
      border-right-color: #f60000;
      border-style: solid;
      border-color: transparent #f60000 transparent transparent;
      transform: rotate(90deg); /*顺时针旋转90°*/
      width: 10px;
      height: 10px;
    }
    .down {
      margin-top: 8px;
      margin-left: 5px;
      border: 6px solid transparent;
      border-top-color: #34a900;
      width: 10px;
      height: 10px;
    }
  }
}
</style>
